iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0
Modern Web

AMP系列 第 21

AMP(Lession 21) - 在 AMP 頁面裡獲取數據 〈Access Trigger 篇〉

  • 分享至 

  • xImage
  •  

在 AMP 頁面裡獲取數據 〈Access Trigger 篇〉

設定範例

上一篇的文章裡,我們有提到 amp-analytics 中的 Access Trigger 用在訪問流程中的不同狀態發出大量事件。與這些相關的事件,依時間順序、成功與否,可細分為:

授權成功時的接收事件 - access-authorization-received

"triggers": {
  "accessAuthorizationReceived": {
    "on": "access-authorization-received",
    "request": "event"
  }
}

授權失敗時的事件 - access-authorization-failed

"triggers": {
  "accessAuthorizationFailed": {
    "on": "access-authorization-failed",
    "request": "event"
  }
}

訪問查看事件 - access-viewed

"triggers": {
  "accessViewed": {
    "on": "access-viewed",
    "request": "event"
  }
}

Pingback 端點成功時 - access-pingback-sent

"triggers": {
  "accessPingbackSent": {
    "on": "access-pingback-sent",
    "request": "event"
  }
}

Pingback 端點失敗時 - access-pingback-failed

"triggers": {
  "accessPingbackFailed": {
    "on": "access-pingback-failed",
    "request": "event"
  }
}

登錄對話框打開之前的事件 - access-login[-type]-started

"triggers": {
  "accessLoginStarted": {
    "on": "access-login-started",
    "request": "event"
  }
}

登錄對話框成功之後的事件 - access-login[-type]-success

"triggers": {
  "accessLoginSuccess": {
    "on": "access-login-success",
    "request": "event"
  }
}

當登錄對話框被用戶拒絕時 - access-login[-type]-rejected

"triggers": {
  "accessLoginRejected": {
    "on": "access-login-rejected",
    "request": "event"
  }
}

當登錄對話框由於未知原因而失敗時 - access-login [-type] -failed

"triggers": {
  "accessLoginFailed": {
    "on": "access-login-failed",
    "request": "event"
  }
}

談談 amp-access

~~上面寫了這麼多,你很有可能不知道在幹嘛吧!~~這裡我們來簡略看看 amp-access 這個 component 。

使用了 amp-access ,我們可以判斷 user 是否有 login 成功、失敗,而有不同的 view 等處理。舉例來說…

<script id="amp-access" type="application/json">
    {
        "authorization": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM", // 發布者提供的端點,由AMP Runtime或Google AMP Cache調用。為經過認證的 CORS GET endpoint
        "pingback": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM", // 主要作用之一在於讓發佈者可以更新 metering information
        "login": { // 登入登出的 API
          "sign-in": "https://ampbyexample.com/components/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
          "sign-out": "https://ampbyexample.com/components/amp-access/logout"
        },
        "authorizationFallbackResponse": { // 如果授權失敗,將使用這裡的設定代替 authorization response
            "error": true,
            "loggedIn": false,
            "powerUser": false
        }
    }
  </script>

上面提到的 errorloggedInpowerUser ,可以如下運用 amp-access

<section amp-access="error">
    <p>錯誤發生了…</p>
</section>
<section amp-access="loggedIn">
    <p>如果成功登入了,你就看得到了唷</p>
</section>
<section amp-access="loggedIn AND powerUser">
    <p>如果成功登入了,而且 powerUser 還要被設定才看得到唷</p>
</section>

所以 Access Trigger 這些事件,就在於我們這一列和 Authorization 相關的過程中發生的。


參考來源:


上一篇
AMP(Lession 20) - 在 AMP 頁面裡獲取數據 〈Page View 與 Event Tracking 篇〉
下一篇
AMP(Lession 22) - 影片播放
系列文
AMP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言